<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootdo - 文件管理器</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/layui.css" rel="stylesheet">
<link href="/css/style.css?v=4.1.0" rel="stylesheet">
<style>
.aactive {
	color: #13b5b7 !important;
}

.hactive:hover {
	color: #13b5b7 !important;
}
</style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content" id="app">
		<div class="row">
			<div class="col-sm-3">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<div class="file-manager">
							<button type="button" class="layui-btn" id="test1">
								<i class="fa fa-cloud"></i>上传文件
							</button>
							<div class="hr-line-dashed"></div>
							<ul class="folder-list" style="padding: 0">
								<li><a href="javascript:void(0)"
									class="file-control hactive" :class="{'aactive':type === ''}"
									v-on:click="changeType('')"><i class="fa fa-folder"></i>所有文件</a></li>

								<li><a href="javascript:void(0)"
									class="file-control hactive" :class="{'aactive':type === 0}"
									id="pic" v-on:click="changeType(0)"><i class="fa fa-folder"></i>图片</a></li>

								<li><a href="javascript:void(0)"
									:class="{'aactive':type === 1}" v-on:click="changeType(1)"
									class="file-control hactive"><i class="fa fa-folder"></i>文档</a>
								</li>
								<!-- 
                            <li><a href="javascript:void(0)" v-on:click="changeType(2)" :class="{'aactive':type === 2}"
                                   class="file-control hactive"><i class="fa fa-folder"></i>视频</a></li>

                            <li><a href="javascript:void(0)" v-on:click="changeType(3)" :class="{'aactive':type === 3}"
                                   class="file-control hactive"><i class="fa fa-folder"></i>音乐</a></li> -->

								<li><a href="javascript:void(0)"
									v-on:click="changeType(99)" :class="{'aactive':type === 99}"
									class="file-control hactive"><i class="fa fa-folder"></i>其他</a></li>


								<!--  <li style="color: black"><a style="color: green">温馨提示:</a>
                                                                                   下载上传的文件第一步：点击文件下方的复制按钮  第二步：复制链接之后可以在任意浏览器粘贴即可自动下载(图片文件保存请点击鼠标右键另存为) </li>    -->
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-9 animated fadeInRight">
				<div class="row">
					<div class="col-sm-12">
						<div class="file-box" v-for="row in rows">
							<div class="file">
								<a href="#"> <span class="corner"></span>
									<div class="image" id="imgg">
										<img alt="image" class="img-responsive" :src="row.url">

									</div>
									<div class="file-name">
										<br />
										<p>{{row.name}}</p>
										<small>{{row.createDate}}</small>
									</div> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
									<button id="btncopy" class="btn btn-warning btn-xs copy"
										@click="load(row.url)">下载</button>&nbsp; &nbsp; &nbsp; &nbsp;
									<button class="btn btn-danger btn-xs" id="btndel"
										@click="remove(row.id)">删除</button>
								</a>
							
							</div>
						</div>
						<div id="incomeNum"></div>
					</div>
				</div>
				<div>
					<ul id="page"></ul>
				</div>
			</div>
		</div>
	</div>

	<!-- 全局js -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"></script>
	<script src="/js/bootstrap-paginator.min.js"></script>

	<script src="/js/content.js?v=1.0.0"></script>
	<script src="/js/layui.js"></script>
	<script src="/js/plugins/clipboard/clipboard.min.js"></script>
	<script src="/js/plugins/layer/layer.min.js"></script>
	<script src="/js/vue.min.js"></script>
	<script type="text/javascript" src="/js/jquery.guide.js"></script>
	<!-- <script>
//测试用，为了每次刷新都有效果，实际开发不需要
var urlRoot = location.href.split('#')[0].replace(/\W/g, '') + 'Guide';
localStorage[urlRoot] = '2';

$.guide([{
  selector: '#btncopy',
  content: '<img src="/img/guide-1.png">',
  align: 'left'
}, {
  selector: '#btndel',
  content: '<img src="/img/guide-2.png">',
  align: 'left'
} , {
  selector: '#test1',
  content: '<img src="/img/guide-3.png">',
  align: 'left'
}, {
  selector: '#pic',
  content: '<img src="/img/guide-3.png">',
  align: 'left'
},{
	  selector: '#imgg',
	  content: '<img src="/img/guide-3.png">',
	  align: 'left'
	}
]);
</script> -->

	<script>
		var app = new Vue({
			el : '#app',
			data : {
				limit : 12,
				offset : 0,
				total : 0,
				file : '',
				type : '',
				rows : '',
			},
			methods : {
				getData : function() {
					$.getJSON("/common/sysFile/list", {
						limit : this.limit,
						offset : this.offset,
						type : this.type
					}, function(r) {
						app.total = r.total;
						app.rows = r.rows;
						app.page();
					});
				},
				page : function() {
					var options = {
						currentPage : app.offset / 12 + 1, //当前页
						totalPages : app.total / (12 + 1) + 1, //总页数
						numberofPages : 4, //显示的页数
						bootstrapMajorVersion : 3,
						alignment : 'center',
						size : 'large',
						shouldShowPage : true,
						itemTexts : function(type, page, current) { //修改显示文字
							switch (type) {
							case "first":
								return "首页";
							case "prev":
								return "上一页";
							case "next":
								return "下一页";
							case "last":
								return "尾页";
							case "page":
								return page;
							}
						},
						onPageClicked : function(event, originalEvent, type,
								page) {
							app.offset = (page - 1) * 12;
							app.getData();
						}
					};
					$('#page').bootstrapPaginator(options);
				},
				remove : function(id) {
					layer.confirm('确定要删除选中的记录？', {
						btn : [ '确定', '取消' ]
					}, function() {
						$.ajax({
							url : "/common/sysFile/remove",
							type : "post",
							data : {
								'id' : id
							},
							success : function(r) {
								if (r.code == 0) {
									layer.msg(r.msg);
									app.getData();
								} else {
									layer.msg(r.msg);
									app.getData();
								}
							}
						});
					})
				},

				load : function(url) {

					window.location.href = '/mv/io/uploadimg?url=' + url;
				},

				changeType : function(i) {
					this.type = i;
					this.offset = 0;
					this.getData();
				}
			},
			created : function() {
				this.changeType('')
			}
		});
	</script>
	<script type="text/javascript">
	/* 	     var clipboard = new Clipboard('button.copy', {
		 text: function (trigger) {
		 layer.msg('文件路径已复制到粘贴板');
		 return $(trigger).attr('url');
		 }
		 });  */
		layui.use('upload', function() {
			var upload = layui.upload;
			//执行实例
			var uploadInst = upload.render({
				elem : '#test1', //绑定元素
				url : '/common/sysFile/upload', //上传接口
				size : 1000,
				accept : 'file',
				done : function(r) {
					layer.msg(r.msg);
					app.getData();
				},
				error : function(r) {
					layer.msg(r.msg);
				}
			});
		});

		// function changeType(i) {
		//     app.type = i;
		//     app.offset = 0;
		//     app.getData();
		// }
	</script>
</body>
</html>
